<template>
    <div v-if="getShow">
        <h2 class="register-title">欢迎注册GpuMall</h2>
        <div class="qr-code-form">
            <div class="mb-32">请使用微信扫一扫登录 <span class="opt" @click="refreshCode">刷新</span></div>
            <div class="qr-code-img mb-24">
                <a-spin :spinning="!qrcodesrc">
                    <img :src="qrcodesrc" alt="">
                </a-spin>
            </div>
            <div class="login-opts">
                <div>没有账号，<span class="opt" @click="goRegister()">立即注册</span></div>
            </div>
        </div>

    </div>
</template>

<script setup>
import { computed, ref, onMounted, onBeforeUnmount} from 'vue'
import { useLoginState } from '@/hooks/sys/useLogin.js'
import { authQrCode } from 'api/modules/api.auth'
import { useAuthStore } from 'stores/auth.js'
const authStore = useAuthStore()

const { getLoginState, setLoginState } = useLoginState()

const getShow = computed(() => {
    return getLoginState.value === 'qrcode'
})

// 获取二维码
const uuid = ref('')
const qrcodesrc = ref('')
const getQrcode = function () {
    authQrCode().then(res => {
        uuid.value = res.data.uuid
        qrcodesrc.value = res.data.qrCode
        checkQrCode()
    })
}

getQrcode()

// 检查二维码
let refresTimer = null
const checkQrCode = function () {
    if (refresTimer) {
        clearInterval(refresTimer)
    }

    refresTimer = setInterval(function () {
        authStore.qrLogin({ uuid: uuid.value }).then(res => {
            if (res.data.status == '1' || res.code != '0') {
                clearInterval(refresTimer)
                refresTimer = null
            }
        }).catch((err) => {
            clearInterval(refresTimer)
            refresTimer = null
        })
    }, 3000)
}

// 刷新二维码
const refreshCode = function () {
    clearInterval(refresTimer)
    refresTimer = null
    getQrcode()
}

// 去注册
const goRegister = () => {
    clearInterval(refresTimer)
    refresTimer = null
    setLoginState('register')
}

onMounted(() => {
	let html = document.documentElement;
	html.style.fontSize = 100 * (html.clientWidth / 1440) + "px";
	// 监听 window 的 resize 事件．在浏览器窗口变化时再设置下区域高度．
	window.onresize = () => {
		let html = document.documentElement;
		html.style.fontSize = 100 * (html.clientWidth / 1440) + "px";
	};
})

onBeforeUnmount(()=> {
    clearInterval(refresTimer)
})

</script>

<style lang="scss" scoped>
.register-title {
    margin-bottom: 0.64rem;
    color: #222;
    font-family: PingFang SC;
    font-size: 0.32rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}


.qr-code-form {
    overflow: hidden;
}

.qr-code-img {
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 1.9rem;
        height: 1.9rem;
    }
}

.login-opts {
    display: flex;
    justify-content: space-between;
    color: #333;
    font-family: PingFang SC;
    font-size: 0.12rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.opt {
    color: #07F;
}
</style>
